<template>
  <div class="store">
    <div class="store-wrap">
      <div class="header">
        <top-bar :barObj="barObj"/>
        <div class="tab">
          <div class="arrow-up"></div>
          <ul>
            <li @click="tabItem('0')">
              <img src="./img/Advertising_btn.png" alt>
              <span>广告展示</span>
            </li>
            <li @click="tabItem('2')">
              <img src="./img/Bill_btn.png" alt>
              <span>话费充值</span>
            </li>
            <li @click="tabItem('0')">
              <img src="./img/top-ups_btn.png" alt>
              <span>点卡充值</span>
            </li>
          </ul>
        </div>
        <div class="content">
          <adverti v-if="tab_type==1"/>
          <charge v-if="tab_type==2"/>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import topBar from "@/components/topBar";
import adverti from "./com/adverti";
import charge from "./com/charge";
import { Toast } from "mint-ui";

export default {
  name: "store",
  components: {
    topBar,
    adverti,
    charge
  },
  data() {
    return {
      barObj: {
        isBack: true,
        backVal: "",
        title: "游戏商城",
        isIcon: true
      },
      tab_type: 2
    };
  },
  methods: {
    tabItem(type) {
      if (type == "0") {
        Toast({
          message: "模块建造中，敬请期待",
          duration: 2000
        });
        return;
      }
      this.tab_type = type;
    }
  }
};
</script>
<style lang="stylus" scoped>
.store {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;

  .store-wrap {
    position: relative;

    .header {
      padding-top: 0.52rem;
      box-sizing: border-box;
      height: 2.38rem;
      background: url('./img/shop_btm_4.png');
      background-size: 100% 100%;

      .tab {
        width: 7.1rem;
        height: 1.79rem;
        background: #fff;
        border-radius: 0.2rem;
        margin: 0.5rem auto 0 auto;
        position: relative;

        .arrow-up {
          width: 0;
          height: 0;
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;
          border-bottom: 8px solid #fff;
          position: absolute;
          top: -8px;
          left: 50%;
          transform: translateX(-50%);
        }

        ul {
          width: 100%;
          display: flex;
          justify-content: space-around;
          text-align: center;

          li {
            height: 1.79rem;
            margin: 0 0.1rem;
            width: 1rem;
            display: flex;
            flex-direction: column;
            align-items: center;

            span {
              color: #666;
              font-size: 12px;
            }

            img {
              width: 100%;
              height: 1rem;
              margin: 10px 0 4px 0;
            }
          }
        }
      }
    }

    .content {
      width: 7.1rem;
      height: 9.5rem;
      margin: 0 auto;
      background: #FFF;
      margin-top: 10px;
      border-radius: 0.2rem;
      overflow: hidden;
    }
  }
}
</style>


